<template>
  <view>
    <!-- 用于渲染支付宝支付表单的容器 -->
    <view id="alipay-form" v-html="payForm"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payForm: '', // 存储后端返回的表单字符串
    };
  },
  onLoad(options) {
    // 如果后端通过 URL 参数传递了 payForm（例如通过跳转时携带）
    if (options.payForm) {
      this.payForm = decodeURIComponent(options.payForm);
      this.submitForm();
    } else {
      // 如果 payForm 是通过其他方式传递（例如从上一个页面存储到全局状态）
      this.loadPayForm();
    }
  },
  methods: {
    // 加载支付表单（如果需要从后端重新请求）
    loadPayForm() {
      // 假设你需要从后端重新请求支付表单
      uni.request({
        url: '/app/physical/pay', // 后端支付接口
        method: 'POST',
        data: {
          packageId: 1,
          hospitalId: 1,
          patientId: 1,
          packagePrice: 100,
          date: '2025-03-13',
        },
        success: (res) => {
          if (res.statusCode === 200 && res.data) {
            this.payForm = res.data; // 存储表单字符串
            this.submitForm(); // 渲染后立即提交
          } else {
            uni.showToast({
              title: '获取支付表单失败',
              icon: 'none',
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络错误: ' + JSON.stringify(err),
            icon: 'none',
          });
        },
      });
    },

    // 手动提交表单
    submitForm() {
      // 确保表单已渲染到 DOM
      this.$nextTick(() => {
        // 动态创建一个临时的 div 元素来解析表单
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = this.payForm;

        // 获取表单元素
        const form = tempDiv.querySelector('form');
        if (form) {
          // 将表单添加到页面
          document.body.appendChild(form);
          // 手动提交表单
          form.submit();
        } else {
          uni.showToast({
            title: '支付表单解析失败',
            icon: 'none',
          });
        }
      });
    },
  },
};
</script>

<style>
#alipay-form {
  display: none; /* 隐藏表单，实际提交时不显示 */
}
</style>